<!DOCTYPE html>
<html lang="en">

<head>
    <!-- UTF-8编码 -->
    <meta charset="UTF-8">
    <!-- 适配移动端 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 使用当前IE版本最高级标准模式渲染 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 标题 -->
    <title>ToDoApp - 首页</title>
    <!-- 引入初始化样式 -->
    <link rel="stylesheet" href="static/css/reset.min.css">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="static/css/style.css">
    <!-- 引入Html5Shiv -->
    <script src="static/css/html5shiv-3.7.3.min.js"></script>
</head>

<body>
    <!-- 头部 -->
    <header>
        <!-- 表单 -->
        <form action="" method="get" onsubmit="return false">
            <input id="item" type="text" name="item" placeholder="Enter an activity..." autocomplete="off" />
            <button type="submit" id="add">
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"><g><path class="fill" d="M16,8c0,0.5-0.5,1-1,1H9v6c0,0.5-0.5,1-1,1s-1-0.5-1-1V9H1C0.5,9,0,8.5,0,8s0.5-1,1-1h6V1c0-0.5,0.5-1,1-1s1,0.5,1,1v6h6C15.5,7,16,7.5,16,8z"/></g></svg>
            </button>
        </form>
    </header>

    <!-- 容器 -->
    <div class="container">
        <!-- 未完成的列表 -->
        <ul id="todo" class="todo">
            <h4>待完成</h4>
            <!-- 动态添加数据 -->
            <% datas.forEach(function (data) { %>
                <!-- 如果状态已完成终止程序 -->
                <% if (data.status) return %>
                <li>
                    <span class="title"><%= data.item %></span>
                    <div class="buttons">
                        <button class="remove" onclick="onDelete(this, '<%= data._id %>')">
                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve"><rect class="noFill" width="22" height="22"/><g><g><path class="fill" d="M16.1,3.6h-1.9V3.3c0-1.3-1-2.3-2.3-2.3h-1.7C8.9,1,7.8,2,7.8,3.3v0.2H5.9c-1.3,0-2.3,1-2.3,2.3v1.3c0,0.5,0.4,0.9,0.9,1v10.5c0,1.3,1,2.3,2.3,2.3h8.5c1.3,0,2.3-1,2.3-2.3V8.2c0.5-0.1,0.9-0.5,0.9-1V5.9C18.4,4.6,17.4,3.6,16.1,3.6z M9.1,3.3c0-0.6,0.5-1.1,1.1-1.1h1.7c0.6,0,1.1,0.5,1.1,1.1v0.2H9.1V3.3z M16.3,18.7c0,0.6-0.5,1.1-1.1,1.1H6.7c-0.6,0-1.1-0.5-1.1-1.1V8.2h10.6V18.7z M17.2,7H4.8V5.9c0-0.6,0.5-1.1,1.1-1.1h10.2c0.6,0,1.1,0.5,1.1,1.1V7z"/></g><g><g><path class="fill" d="M11,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6s0.6,0.3,0.6,0.6v6.8C11.6,17.7,11.4,18,11,18z"/></g><g><path class="fill" d="M8,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6c0.4,0,0.6,0.3,0.6,0.6v6.8C8.7,17.7,8.4,18,8,18z"/></g><g><path class="fill" d="M14,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6c0.4,0,0.6,0.3,0.6,0.6v6.8C14.6,17.7,14.3,18,14,18z"/></g></g></g></svg>
                        </button>
                        <button class="complete" onclick="onEdit(this, '<%= data._id %>')">
                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve"><rect y="0" class="noFill" width="22" height="22"/><g><path class="fill" d="M9.7,14.4L9.7,14.4c-0.2,0-0.4-0.1-0.5-0.2l-2.7-2.7c-0.3-0.3-0.3-0.8,0-1.1s0.8-0.3,1.1,0l2.1,2.1l4.8-4.8c0.3-0.3,0.8-0.3,1.1,0s0.3,0.8,0,1.1l-5.3,5.3C10.1,14.3,9.9,14.4,9.7,14.4z"/></g></svg>
                        </button>
                    </div>
                </li>
            <% }) %>
        </ul>

        <!-- 已完成的列表 -->
        <ul id="completed" class="todo">
            <h4>已完成</h4>
            <!-- 动态添加数据 -->
            <% datas.forEach(function (data) { %>
                <!-- 如果状态未完成终止程序 -->
                <% if (!data.status) return %>
                <li>
                    <span class="title"><%= data.item %></span>
                    <div class="buttons">
                        <button class="remove" onclick="onDelete(this, '<%= data._id %>')">
                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve"><rect class="noFill" width="22" height="22"/><g><g><path class="fill" d="M16.1,3.6h-1.9V3.3c0-1.3-1-2.3-2.3-2.3h-1.7C8.9,1,7.8,2,7.8,3.3v0.2H5.9c-1.3,0-2.3,1-2.3,2.3v1.3c0,0.5,0.4,0.9,0.9,1v10.5c0,1.3,1,2.3,2.3,2.3h8.5c1.3,0,2.3-1,2.3-2.3V8.2c0.5-0.1,0.9-0.5,0.9-1V5.9C18.4,4.6,17.4,3.6,16.1,3.6z M9.1,3.3c0-0.6,0.5-1.1,1.1-1.1h1.7c0.6,0,1.1,0.5,1.1,1.1v0.2H9.1V3.3z M16.3,18.7c0,0.6-0.5,1.1-1.1,1.1H6.7c-0.6,0-1.1-0.5-1.1-1.1V8.2h10.6V18.7z M17.2,7H4.8V5.9c0-0.6,0.5-1.1,1.1-1.1h10.2c0.6,0,1.1,0.5,1.1,1.1V7z"/></g><g><g><path class="fill" d="M11,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6s0.6,0.3,0.6,0.6v6.8C11.6,17.7,11.4,18,11,18z"/></g><g><path class="fill" d="M8,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6c0.4,0,0.6,0.3,0.6,0.6v6.8C8.7,17.7,8.4,18,8,18z"/></g><g><path class="fill" d="M14,18c-0.4,0-0.6-0.3-0.6-0.6v-6.8c0-0.4,0.3-0.6,0.6-0.6c0.4,0,0.6,0.3,0.6,0.6v6.8C14.6,17.7,14.3,18,14,18z"/></g></g></g></svg>
                        </button>
                        <button class="complete" disabled>
                            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" style="enable-background:new 0 0 22 22;" xml:space="preserve"><rect y="0" class="noFill" width="22" height="22"/><g><path class="fill" d="M9.7,14.4L9.7,14.4c-0.2,0-0.4-0.1-0.5-0.2l-2.7-2.7c-0.3-0.3-0.3-0.8,0-1.1s0.8-0.3,1.1,0l2.1,2.1l4.8-4.8c0.3-0.3,0.8-0.3,1.1,0s0.3,0.8,0,1.1l-5.3,5.3C10.1,14.3,9.9,14.4,9.7,14.4z"/></g></svg>
                        </button>
                    </div>
                </li>
            <% }) %>
        </ul>
    </div>

    <!-- 引入JQuery -->
    <script src="static/js/jquery-3.4.1.min.js"></script>
    <!-- 逻辑行为 -->
    <script>
        $(function () {
            // 添加数据
            onAdd()
        })

        /**
         * 添加数据
         */
        function onAdd() {
            // 按钮
            const add = $('#add')
            // 文本框
            const item = $('#item')
            // 未完成列表
            const todo = $('#todo')

            // 文本框获取焦点
            item.focus()

            // 绑定点击事件
            add.on('click', function () {
                console.log('onAdd')

                // 如果值为空终止程序
                if (!item.val()) return

                // 设置按钮为禁用状态，防止重复点击
                $(this).prop('disabled', true)

                // 保存数据
                const data = {item: item.val(), status: false}

                // 发送Ajax请求
                $.ajax({
                    type: 'post',
                    url: '/',
                    data: data,
                    success: function (data) {
                        console.log(data)

                        // 如果状态码不为200，终止程序
                        if (data.state !== 200) return

                        // 刷新页面
                        window.location.reload()
                    },
                    error: function (err) {
                        console.log(err)

                        // 把按钮设置回可用状态
                        $(this).prop('disabled', false)
                    }
                })
            })
        }

        /**
         * 删除数据
         */
        function onDelete(_this, _id) {
            console.log('onDelete')

            // 设置按钮为禁用状态，防止重复点击
            $(_this).prop('disabled', true)

            // 未完成列表
            const todo = $('#todo')

            // 发送Ajax请求
            $.ajax({
                type: 'delete',
                url: `/${_id}`,
                success: function (data) {
                    console.log(data)

                    // 如果状态码不为200，终止程序
                    if (data.state !== 200) return

                    // 刷新页面
                    window.location.reload()
                },
                error: function (err) {
                    console.log(err)

                    // 把按钮设置回可用状态
                    $(_this).prop('disabled', false)
                }
            })
        }

        /**
         * 修改数据
         */
        function onEdit(_this, _id) {
            console.log('onEdit')

            // 设置按钮为禁用状态，防止重复点击
            $(_this).prop('disabled', true)

            // 保存数据
            const data = {_id: _id, status: true}

            // 发送Ajax请求
            $.ajax({
                type: 'put',
                url: `/${_id}`,
                data: data,
                success: function (data) {
                    console.log(data)

                    // 如果状态码不为200终止程序
                    if (data.state !== 200) return

                    // 刷新页面
                    window.location.reload()
                },
                error: function (err) {
                    console.log(err)

                    // 把按钮设置回可用状态
                    $(_this).prop('disbled', false)
                }
            })
        }
    </script>
</body>

</html>